import { produce } from "immer";
import { create } from "zustand";
import { persist } from "zustand/middleware"; //用于持久化存储

type Action = {
  updateSettingsVisible: (value: boolean) => void;
  updateTagsVisible: (value: boolean) => void;
  updateSidebarOpend: () => void;
  updateIsDark: () => void;
  updateThemeColor: (value: string) => void;
  updateSidebarLogoVisible: () => void;
};

interface State {
  settingsVisible: boolean;
  sidebarOpend: boolean;
  tagsVisible: boolean;
  sidebarLogoVisible: boolean;
  // 是否为暗黑主题
  isDark: boolean;
  themeColor: string; // 主题色
}

export const useSettingStore = create<State & Action>()(
  persist(
    //使用持久化组件包裹
    (set) => ({
      settingsVisible: false,
      sidebarOpend: true,
      sidebarLogoVisible: true,
      tagsVisible: true,
      isDark: true,
      themeColor: "#4080FF",
      updateSettingsVisible: (value) =>
        set(
          produce((state: State) => {
            state.settingsVisible = value;
          })
        ),
      updateSidebarOpend: () =>
        set(
          produce((state: State) => {
            state.sidebarOpend = !state.sidebarOpend;
          })
        ),
      updateIsDark: () =>
        set(
          produce((state: State) => {
            state.isDark = !state.isDark;
          })
        ),
      updateSidebarLogoVisible: () =>
        set(
          produce((state: State) => {
            state.sidebarLogoVisible = !state.sidebarLogoVisible;
          })
        ),
      updateTagsVisible: () =>
        set(
          produce((state: State) => {
            state.tagsVisible = !state.tagsVisible;
          })
        ),
      updateThemeColor: (value) =>
        set(
          produce((state: State) => {
            state.themeColor = value;
          })
        ),
    }),
    {
      name: "setting-storage", //在localStorage中对应的key
    }
  )
);
